<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style="float: right; padding:3px 0" type="text" @click="cancelForm">返回列表</el-button>
      </div>
      <div style="max-width:1000px;margin:auto;">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="table-form"
          size="small"
        >
          <table class="table table-bordered th-bg">
            <tbody>
            <tr v-if="user.roleName=='管理员'">
              <th width="15%" >企业名称</th>
              <td colspan="3">
                <el-form-item prop="enterpriseName">
                  <!--{{user.roleName=='管理员'?<el-input v-model="form.enterpriseName"/>:el-input v-model="form.enterpriseName" readonly/>}}-->
                  <el-input v-model="form.enterpriseName" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">岗位名称</th>
              <td colspan="3">
                <el-form-item prop="recruitPosition">
                  <el-input v-model="form.recruitPosition"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <!--
              <th width="15%">岗位描述</th>
              <td colspan="3">
                <el-form-item prop="responsibilities">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="form.responsibilities">
                  </el-input>
                </el-form-item>
              </td>
              -->
              <th width="15%">岗位描述</th>
              <td colspan="3">
                <el-form-item prop="responsibilities" class="editor">
                  <div style="border: 1px solid #ccc;">
                    <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editor1"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                    />
                    <Editor
                      style="height: 300px; overflow-y: hidden;"
                      v-model="form.responsibilities"
                      :defaultContent="defaultContent"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="onCreated1"
                    />
                  </div>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">学历要求</th>
              <td width="35%">
                <el-form-item prop="education">
                  <el-select
                    v-model="form.education"
                    clearable
                    size="small"
                    placeholder="学历要求"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in educationList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    />    
                  </el-select>
                </el-form-item>

              </td>
              <th>招聘人数</th>
              <td width="35%">
                <el-form-item prop="headcount">
                  <el-input v-model="form.headcount"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">招聘要求</th>
              <td colspan="3">
                <el-form-item prop="recruitRequires" class="editor">
                  <div style="border: 1px solid #ccc;">
                    <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editor2"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                    />
                    <Editor
                      style="height: 300px; overflow-y: hidden;"
                      v-model="form.recruitRequires"
                      :defaultContent="defaultContent"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="onCreated2"
                    />
                  </div>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">薪资待遇</th>
              <td width="35%">
                <el-form-item prop="salaryType">
                  <el-select
                    v-model="form.salaryType"
                    clearable
                    size="small"
                    placeholder="薪资待遇"
                    class="filter-item"
                    :style="{ width: '100px' }"
                    @change="changeSalaryRequirement(form.salaryType)"
                  >
                    <el-option
                      v-for="item in salaryList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    /> 
                  </el-select>
                  <span v-if="form.salaryType=='年薪'||form.salaryType=='月薪'" prop="salary">
                    <el-input  v-model="form.salary" :style="{ width: 'calc(100% - 140px)' } "/>
                    <span>元</span>
                  </span>
                </el-form-item>
              </td>
              <th width="15%">薪资说明</th>
              <td width="35%">
                <el-form-item prop="salaryDesc">
                  <el-input v-model="form.salaryDesc"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <th width="15%">是否提供住宿</th>
              </td>
              <td>
                <el-form-item prop="accommodation">
                  <el-radio-group v-model="form.accommodation" style="width: 140px">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
              </td>
              <td>
                <th width="15%">是否提供工作餐</th>
              </td>
              <td>
                <el-form-item prop="workMeal">
                  <el-radio-group v-model="form.workMeal" style="width: 140px">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">联系人联系方式</th>
              <td width="35%">
                <el-form-item prop="contact">
                  <el-input v-model="form.contact"/>
                </el-form-item>
              </td>
              <th width="15%">截止日期</th>
              <td width="35%">
                <el-form-item prop="deadline">
                  <el-date-picker
                    v-model="form.deadline"
                    clearable
                    size="small"
                    placeholder="请选择截止日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </td>
            </tr>
            </tbody>
          </table>
          <div style="display:flex; align-item: center; justify-content: center; margin-top:20px;">
            <el-button
              :loading="loading"
              type="primary"
              size="small"
              @click="submitForm"
            >
              {{isEdit ? '更新招聘信息' : '新增招聘信息'}}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudRecruit from '@/api/business/recruit'
import { MessageBox } from 'element-ui'
import { educationList, accommodationList, workMealList, salaryList } from '@/utils/index.js';
import { form } from '@/components/Crud/crud';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const defaultForm = {

}

export default {
  components: {
    Editor, 
    Toolbar
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      actionUrl: '/sf_enterprise_service/business/file/upload',
      form: JSON.parse(JSON.stringify(defaultForm)),
      rules: {
        enterpriseName: [
          {
            
          }
        ],
        recruitPosition: [
          {
            required: true,
            message: '请输入岗位名称'
          }
        ],
        responsibilities: [
          {
            required: true,
            message: '请输入岗位描述'
          }
        ],
        education: [
          {
            required: true,
            message: '请选择学历要求'
          }
        ],
        headcount: [
          {
            required: true,
            message: '请输入招聘人数'
          }
        ],
        recruitRequires: [
          {
            required: true,
            message: '请输入招聘要求'
          }
        ],
        salary: [
          {
          
          }
        ],
        salaryType: [
          {
            required: true,
            message: '请选择薪资类型'
          }
        ],
        contact: [
          {
            required: true,
            message: '请输入联系人联系方式'
          }
        ],
        accommodation: [
          {
            required: true,
            message: '请选择是否提供住宿'
          }
        ],
        workMeal: [
          {
            required: true,
            message: '请选择是否提供工作餐'
          }
        ]
      },
      loading: false,
      id: null,
      educationList,
      accommodationList,
      workMealList,
      salaryList,
      editor1: null,
      editor2: null,
      html: '',
      toolbarConfig: { 
        excludeKeys: [
	        'fullScreen',
          'uploadVideo',
          'uploadImage'
	      ]
      },
      editorConfig: { 
        placeholder: '请输入内容...',
        MENU_CONF: {
          lineHeight: {
            lineHeightList: [ '1', '1,2', '1.5', '2', '2.5']
          }
        }
      },
      mode: 'default', // or 'simple'
      defaultContent : [
        {
          type: 'paragraph',
          lineHeight: '1.5',
          children: [
            { text: '', fontSize: '15px' },
          ]
        }
      ]
    }
  },
  created() {
    if (this.isEdit) {
      this.id = this.$route.params && this.$route.params.id
      this.fetchData(this.id)
    }else {
    }
  },
  methods: {
    uploadFiles(response, file, fileList) {
      console.log(response, file, fileList, 'upload')
      this.form.files = fileList
    },
    removeFiles(file, fileList) {
      console.log(file, fileList, 'remove')
      this.form.files = fileList
    },
    fetchData(id) {
      crudRecruit.get(id).then(response => {
        this.form = Object.assign({}, this.form, response.data)

        // if (response.data.fireFileList) {
        //   for (let i = 0; i < response.data.fireFileList.length; i++) {
        //     const item = response.data.fireFileList[i]
        //     const file = {
        //       fileId: item.fileId,
        //       name: item.fileName,
        //       url: `business/file/download?fileId=${item.fileId}`
        //     }
        //     this.fireFileList.push(file)
        //   }
        //   this.form.fireFileIdList = this.fireFileList.map(x => x.fileId)
        // }

      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      this.$router.push('/business/recruit')
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        MessageBox.confirm('您确认执行此操作吗？', '确认操作', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          // let arr = []
          // this.form.files.forEach(item => {
          //   arr.push(item.response.fileId)
          // })
          // this.form.files = arr.join()
          console.log(this.form)
          if (this.form.deadline == null){
            this.form.deadline = ""
          }
          if (this.isEdit) {
            crudRecruit.edit(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '修改信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          } else {
            crudRecruit.add(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '提交信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        }).catch((e) => {
          console.log(e)
        });
      })
    },
    onCreated1(editor1) {
            this.editor1 = Object.seal(editor1) // 一定要用 Object.seal() ，否则会报错
    },
    onCreated2(editor2) {
            this.editor2 = Object.seal(editor2) // 一定要用 Object.seal() ，否则会报错
    },
    changeSalaryRequirement(salaryType){
      if (salaryType == '年薪'|salaryType =='月薪'){
        this.rules.salary.push({
          required: true,
          message: '请输入薪资待遇'
        });
      }
      else{
        this.rules.salary.pop()
      }
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
    this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
    if (this.user.roleName == '管理员') {
      this.rules.enterpriseName.push({
        required: true,
        message: '请输入企业名称'
      });
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>